import React, { useState } from'react';
import { Swiper,SwiperItem,View,Input,Image,Text } from '@tarojs/components';
import BottomNavigation from '../../components/BottomNavigation/BottomNavigation';
import './index.scss';
import { navigateTo } from '@/utils/navigation'
import liquor from '@/assets/home/liquor.png';
import wine from '@/assets/home/wine.png';
import importedWine from '@/assets/home/imported-wine.png';
import bag from '@/assets/home/bag.png';
import shoes from '@/assets/home/shoes.png';
import watch from '@/assets/home/watch.png';
import useNavBarInfo from '@/hook/useNavBarInfo'
// 图片映射表
const iconMap = {
  liquor,
  wine,
  importedWine,
  bag,
  shoes,
  watch
};

// 轮播
const MySwiper = ({ images }: { images: string[] }) => (
  <Swiper
    indicatorDots
    autoplay
    interval={3000}
    circular
  >
    {images.map((src, index) => (
      <SwiperItem key={index}>
        <Image src={src} mode="aspectFill" style={{ width: '100%' , height: '100%' }}  />
      </SwiperItem>
    ))}
  </Swiper>
);
const Authenticate = ({ data }: { data: any[] }) => (
  <Swiper
    indicatorDots
    autoplay
    interval={3000}
    circular
  >
    {data.map((item,index)  => (
      <SwiperItem key={index}>
        <Image onClick={() => navigateTo(item.url)} src={item.photo} mode="aspectFill" style={{ width: '100%' , height: '100%' }}  ></Image>
      </SwiperItem>
    ))}
  </Swiper>
);
// 机构
const Org = ({ images }: { images: string[] }) => {
  return (
    <View className="org-img-box">
      {images.map((src,index)  => (
        <View key={index} className="org-img">
          <Image src={src} style={{ width: '100%', height: '100%' }} />
        </View>
      ))}
    </View>
  );
};
// 分类
const Type = ({ data }: { data: any[] }) => {
  return (
    <View className="type-box">
      {data.map((item,index)  => (
        <View  key={index} className="type-item">
          <View className="type-img">
            <Image src={iconMap[item.icon]}/>
          </View>
          <View className="type-title">{item.name}</View>
        </View>
      ))}
    </View>
  );
};
// 专家
const Expert = ({ data }: { data: any[] }) => {
  return (
    <View className="expert-box">
      {data.map((item,index)  => (
        <View key={index} className="expert-item" onClick={() => navigateTo('/pages/home/user/index')}>
          <View className="expert-img">
            <Image src={item.photo}/>
          </View>
          <View className="expert-title">{item.name}</View>
        </View>
      ))}
    </View>
  );
};

// 鉴定产品
const Auth = ({ data }: { data: any[] }) => {
  return (
    <View className="auth-goods-box">
      {data.map((item,index)  => (
        <View key={index} className="auth-goods-item" onClick={() => navigateTo('/pages/home/appraisal-details/index')}>
          <View className="mer">
            <View className="mer-dsc">
              <View className="mer-img">
                <Image src={item.photo}></Image>
              </View>
              <View className="mer-msg">
                <View className="name">{item.name}</View>
                <View className="time">{item.time}<View className="site">{item.site}</View></View>
              </View>
            </View>
            <View className="auth-res">
              <Image src={require(`../../assets/home/res.png`)}/>
              <View className="title">鉴定为{item.state == 1 ? '真':'假'}</View>
            </View>
          </View>

          <View className="goods">
            <View className="goods-name">{item.goods_name}</View>
            <View className="year">{item.year}</View>
          </View>
          <View className="goods-img">
            {item.list.map((src,indexs)  => (
              <Image key={indexs} src={src}/>
            ))}
          </View>
        </View>
      ))}
    </View>
  );
};
const Index: React.FC = () => {
  const navBarInfo = useNavBarInfo()
  const [value, setValue] = useState<string>('');

  const [selectedIndex, setSelectedIndex] = useState(0);

  const imageList = [
    'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
    'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
    'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
    'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg'
  ];
  const authenticateList = [
    { url: '/pages/home/appraisal-rank/index', photo: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg' },
    { url: '/pages/home/appraisal-source/index', photo: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg' },
  ];
  const expertList = [
    { name: '白酒1', photo: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg' },
    { name: '白酒2', photo: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg' },
    { name: '白酒3', photo: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg' },
    { name: '白酒4', photo: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg' },
  ];

  const authList = [
    {
      name: '白酒1',
      year: '2021',
      time: '2025.6.22 12:12',
      site: '北京',
      goods_name: '贵州茅台1',
      state: 1,
      photo: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
      list: [
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg'
      ]
    },
    {
      name: '白酒2',
      year: '2023',
      time: '2025.6.22 12:12',
      site: '江西',
      goods_name: '贵州茅台2',
      state: 2,
      photo: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
      list: [
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg'
      ]
    },
    {
      name: '白酒3',
      year: '2021',
      time: '2025.6.22 12:12',
      site: '湖北',
      goods_name: '贵州茅台3',
      state: 1,
      photo: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
      list: [
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg'
      ]
    },
    {
      name: '白酒4',
      year: '2021',
      time: '2025.6.22 12:12',
      site: '湖北',
      goods_name: '贵州茅台4',
      state: 2,
      photo: 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
      list: [
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg',
        'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg'
      ]
    }
  ];

  const typeList = [
    { name: '白酒', icon: 'liquor', index: 0, path: '/pages/home/index' },
    { name: '葡萄酒', icon: 'wine', index: 1, path: '/pages/home/index' },
    { name: '洋酒', icon: 'importedWine', index: 2, path: '/pages/home/index' },
    { name: '箱包', icon: 'bag', index: 3, path: '/pages/home/index' },
    { name: '鞋类', icon: 'shoes', index: 4, path: '/pages/home/index' },
    { name: '钟表', icon: 'watch', index: 5, path: '/pages/home/index' },
  ];
  return (
    <View className="home-page">
      {/* 页面内容区域 */}
      <View
        className="user-bar"
        style={{
          paddingTop: `${navBarInfo.statusBarHeightRpx - 30}rpx`,
          height: `${navBarInfo.totalHeightRpx}rpx`,
          flexShrink: 0,
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100%',
          zIndex: 999,
          backgroundColor: '#F0F0F0',
          display: 'flex',
          alignItems: 'center',
          paddingLeft: '24rpx',
          paddingRight: '24rpx',
          boxSizing: 'border-box'
        }}
      >
        <Image className="code" src={require(`../../assets/code.png`)}></Image>
        <View className="logo-box">
          <Image className="logo" src={require(`../../assets/logo.png`)}></Image>
          鉴定保真 | 就选<Text className="orange">国鉴甄选</Text>
        </View>
      </View>
      <View className="content" style={{marginTop: `${navBarInfo.totalHeightRpx}rpx`}}>
        <View className="home-swiper">
          <MySwiper images={imageList} />
        </View>
        <View className="org-box">
          <View className="title">合作机构</View>
          <Org images={imageList} ></Org>
        </View>
        <View className="auth-type">
          <Type data={typeList}></Type>
          <View className="auth">
            <View className="title">已累计鉴定</View>
            <View className="num">1313086</View>
            <View className="but-box">
              <View className="but">免费鉴定</View>
            </View>
          </View>
        </View>
        <View className="expert">
          <View className="expert-type">
            <View className="type-checked">行业专家</View>
            <View className="type-left type">鉴定团队</View>
          </View>
          <Expert data={expertList}></Expert>
          <View className="expert-more">
            <View className="expert-swiper">
              <Authenticate data={authenticateList} />
            </View>
            <View className="expert-dsc">
              <View className="expert-coupon" onClick={() => navigateTo('/pages/home/coupon/index')}>
                <View className="title">优惠券</View>
                <View className="dsc">YOUHUIQUAN</View>
                <View className="more">More*</View>
              </View>
              <View className="expert-market" onClick={() => navigateTo('/pages/home/market/index')}>
                <View className="title">市场行情</View>
                <View className="dsc">SHICHANGHANGQING</View>
                <View className="more">More*</View>
              </View>
            </View>
          </View>
        </View>
        <View className="authenticate">
          <View className="authenticate-type">
            <View className="type-checked">正在鉴定</View>
            <View className="type-left type">外观为真</View>
            <View className="type-left type">鉴定为家</View>
          </View>
          <View className="auth-search">
            <Image className="auth-icon" src={require(`../../assets/home/search.png`)}/>
            <Input
              className="auth-input"
              value={value}
              onInput={(e) => setValue(e.detail.value)}
              placeholder="请输入搜索关键词"
              disabled={false}
            />
          </View>
        </View>
        <Auth data={authList}></Auth>
        <View className="bottom-sprag"></View>
      </View>
      {/* 底部导航栏 */}
      <BottomNavigation selectedIndex={selectedIndex} onTabChange={setSelectedIndex} />
    </View>
  );
};

export default Index;
